<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签</title>
</head>

<body>
    <!-- 应用场景 - 适合做导航 -->
    <!-- 无序列表
         type属性 - square  circle   disc
    -->
    <ul type="circle">苏州
        <li>2019</li>
        <li>阿成</li>
        <li>学习</li>
        <li>html</li>
    </ul>
    <ol type="a">
        <li>2019</li>
        <li>阿成</li>
        <li>学习</li>
        <li>html</li>
    </ol>
    <hr>
    <ul>
        <li>
            <ol>ac
                <li>2019</li>
                <li>学习</li>
            </ol>
        </li>
        <li>
            <ol>ac
                <li>2019</li>
                <li>学习</li>
            </ol>
        </li>
    </ul>

    <!-- html5.0中支持自定义的列表标签 -->
    <dl>
        <dt>四大名著</dt>
        <dd>水浒传</dd>
        <dd>红楼梦</dd>

        <dt>四大恶人</dt>
        <dd>风波恶</dd>
        <dd>恶贯满盈</dd>
        <dd>穷凶极恶</dd>
    </dl>

    <!-- 什么是图片? - 二进制数据 -->
    <!-- 列举图片的格式,说出区别 -->
    <!-- 1 - gif
         2 - jpg - 不支持透明背景
         3 - png - web当中使用的格式 - 支持透明背景的

         普通的图片 - 控制10kb以内 - 降低质量
         banner图片 - 控制在150kb左右
                    - banner图片尽量选择纯色

         如果网页中的图片越大,那么网页的加载速度就会越慢 
         网页优先显示 数据内容 , 其次延迟加载显示图片

         alt - 当src指定的图片路径有误,则显示alt中的内容

         在线的图片的压缩:https://tinypng.com/
 -->
    <img src="images/banner.png" alt="图片加载失败">

    <img src="images/banner.png" alt="图片加载失败" width="200px" height="200px">
    <!-- 音频标签 -->
    <audio controls>
        <source src="sounds/萌萌哒天团 - 帝都.mp3" type="audio/mpeg">
    </audio>
    <!-- 视频标签 -->
    <video width="320" height="240" controls>
        <source src="vedio/相声.mp4" type="video/mp4">
    </video>
</body>

</html>